<?xml version="1.0" encoding="ISO-8859-1" ?>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@page import="net.groupme.gui.rendering.constants.RENDERING_CONSTANTS"%>
<%@page import="net.groupme.search.SEARCH_CONFIGURATION"%>
<html xmlns="http://www.w3.org/1999/xhtml">

<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<head>
	<!-- meta tags, link to css:  -->
	<%@ include file="./jsp-includes/metaheader.jsp" %>
	
	<!--  Ajax-Includes -->
    <script type='text/javascript' src='/GroupMe/dwr/interface/DWRSearchManager.js'></script>
    <script type='text/javascript' src='/GroupMe/dwr/engine.js'></script>
    <script type='text/javascript' src='/GroupMe/dwr/util.js'></script>

	<title>GroupMe! - The Social Semantic Web [Search]</title>
	<script type="text/javascript" language="javascript"><!--
	//<![CDATA[//>
	
	/**
	 * Visualize a tag cloud.
	 */
	 function showTagCloud(tagCloud){
	 	$('tagcloud').innerHTML = "<p><strong>most popular tags:</strong> </p>" + tagCloud.html;
	 }
	//init stuff:		
	function init() {
		  //DWRUtil.useLoadingMessage();
		  DWRSearchManager.getTagCloud(null, null, false, showTagCloud);
		}
	//<!]]>
	--></script>
</head>
<body onload="init()">
	<!-- title image, logo:  -->
	<div id="header">
		<%@ include file="./jsp-includes/titleheader.jsp" %>
	</div>
	
	<!-- Menu: -->
	<div id="menu">
		<%@ include file="./jsp-includes/menu.jsp" %>
	</div>
	<!-- content and sidebar -->
	<div id="main">

		<!-- Sidebar -->
		<div id="sidebar">
			<div id="tagcloud">
			<p><strong>most popular tags:</strong> </p>
			<!-- first do caching: -->
			<c:choose>
			<c:when test="${searchManager.cachedTagCloud != null}">
				<c:out value="${searchManager.cachedTagCloud.html}" escapeXml="false"/><br/>
			</c:when>
			<c:otherwise>
				no cached tag cloud
			</c:otherwise>
			</c:choose>
			</div>
		</div>


		<!-- Content: -->
		<div id="content">
			<div id="upperRight" style="width:20%; text-align:left; float:right; font-size:0.9em">
				Note: GroupMe! has just launched the first beta version. At the moment there are only a few groups and resources. 
				Hence, the search engine will only gain results if you use tags from the tag cloud on the left.
			</div>
			<h1>Search</h1>
			<p>Search for Groups/Resources:</p>
			<form action="<%= VIEW_VOCABULARY.GROUPME_BASE_URL + VIEW_VOCABULARY.ACTION_SEARCH %>"> 
				<table>
					<tr>
						<td>Enter tags: </td>
						<td><input id="searchInput" type="text" name="<%= VIEW_VOCABULARY.PARAMETER_KEYWORD %>" value="<c:out value='${keyword}'></c:out>"/> </td>
						<td><input type="submit" value="search"/> </td>
					</tr>
					<tr>
						<td colspan="3">
							<input type="radio" name="<%= VIEW_VOCABULARY.PARAMETER_SEARCH_FOR %>" value="<%= VIEW_VOCABULARY.SEARCH_FOR_RESOURCES %>"/> resources
							<input type="radio" name="<%= VIEW_VOCABULARY.PARAMETER_SEARCH_FOR %>" value="<%= VIEW_VOCABULARY.SEARCH_FOR_GROUPS %>"/> groups
							<input type="radio" checked="checked" name="<%= VIEW_VOCABULARY.PARAMETER_SEARCH_FOR %>" value="<%= VIEW_VOCABULARY.SEARCH_FOR_GROUPS_AND_RESOURCES %>"/> both
							
							<input type="hidden"  name="<%= VIEW_VOCABULARY.PARAMETER_FREE_SEARCH %>" value="true"/>
							<input type="hidden"  name="<%= VIEW_VOCABULARY.PARAMETER_SEARCH_FOR_ALL %>" value="false"/>
						</td>
					</tr>
				</table>
			</form>
			
			<c:if test="${searchResultList != null}">
				<h1>Search Results</h1>
				
				<p>
					<small>
						Searching for: <i><c:out value="${keyword}"/></i> -
						Number of results: <c:out value="${searchManager.actualNumberOfResults}"/>
					</small>
				</p>
				
			</c:if>
			 
			 <c:forEach items="${searchResultList}" var="resource" varStatus="status">
				<c:if test="${status.first}">
					<ol>
				</c:if>
				<li class="searchResultItem">
					<c:choose>
						<c:when test="${resource.type == 'group'}">
							<strong><a href="<%= VIEW_VOCABULARY.REQUEST_TYPE_GROUP + "/" %><c:out value="${resource.id}"/>"><c:out value="${resource.name}"/></a></strong>
							(Group)
						</c:when>
						<c:otherwise>
							<strong><a href="<%= VIEW_VOCABULARY.REQUEST_TYPE_RESOURCE + "/" %><c:out value="${resource.id}"/>"><c:out value="${resource.name}"/></a></strong>
						</c:otherwise>
					</c:choose>
					<br/>
					<c:if test="${resource.type == 'image'}">
					<c:choose>
						<c:when test="${resource.type == 'image'}">
							<img  src="<c:out value='${resource.URL}'/>" width="150px"/>
						</c:when>
						<c:otherwise>
							<c:out value="${resource.description}"></c:out>
						</c:otherwise>
					</c:choose>
					</c:if>
					
					<br/>
					Tags:
					<small>
					<c:forEach items="${resource.tags}" var="tag" varStatus="tagStatus">
						<c:choose>
							<c:when test="${tagStatus.first}"></c:when>
							<c:when test="${tagStatus.last}"> - </c:when>
							<c:otherwise> -	</c:otherwise>
						</c:choose>
						<!-- Tag Action Link: clicking on the Tag link causes Tag-search for resources and groups-->
						<c:choose>
							<c:when test="${fn:contains(tag.keyword, ' ') }">
								<a href="<c:out value="${tag.URI}"/>" title="Search for groups and resources tagged with <c:out value='${tag.keyword}'/>"><c:out value="${tag.keyword}"></c:out></a>
							</c:when>
							<c:otherwise>
								<a href="<%= request.getContextPath() +"/"+ VIEW_VOCABULARY.ACTION_SEARCH + "?" + VIEW_VOCABULARY.PARAMETER_KEYWORD + "=" %><c:out value='${tag.keyword}'/>" title="Search for Groups and Resources tagged with <c:out value='${tag.keyword}'/>"><c:out value="${tag.keyword}"></c:out></a>
							</c:otherwise>
						</c:choose>
					</c:forEach>
					</small>
					
				</li>
				<c:if test="${status.last}">
					</ol>
				</c:if>
			</c:forEach>
		</div>
	</div>
	<div id="bigResourceScreen" style="z-index:50000; position:fixed; text-align:center; vertical-align:middle; left:0px; top:0px; width:100px; height:60px; background-color:black; display:none;">
	</div>
	<div id="bigResource" style="z-index:50001; position:fixed; left:0px; top:0px; text-align:center; vertical-align:middle; width:100%; display:none;">
	</div>
	<div id="footer">
		<%@ include file="./jsp-includes/footer.jsp" %>
	</div>
</body>
</html>